import Player from '../music'

const mode = (player) => {
    const util = Player.util;
    const controlEl = player.controls;

    const domArr = [
        util.createDom('xg-mode', `<a href="javascript:;" class="icn" title=""></a>`, {}, 'xgplayer-mode'),
        util.createDom('xg-mode-tips', `<div class="mode-tips" >循环</div>`, {}, 'xgplayer-mode-tips')
    ];

    domArr.forEach(item => controlEl.appendChild(item));

    let modeMap = {
       'order' : 0,
       'random' : 1,
       'loop' : 2
    };
    let modeText = {
        0: '顺序',
        1: '随机',
        2: '单曲循环'
    }
    let modeIndex = modeMap[player.mode];
    let timeOut = null;
    let modeTips = domArr[0].children[0];
    
    domArr[1].children[0].innerText = modeText[modeIndex];
    modeTips.title = modeText[modeIndex];
    modeTips.className = '';
    modeTips.className = `icn icn-${modeIndex}`;
    
    domArr[0].addEventListener('click', function (e) {
        modeIndex++;
        if (modeIndex > 2) modeIndex = 0;

        domArr[1].style.display = 'block';
        player.mode = modeIndex;

        domArr[1].children[0].innerText = modeText[modeIndex];
        modeTips.title = modeText[modeIndex];
        modeTips.className = '';
        modeTips.className = `icn icn-${modeIndex}`;
        player.emit('modeChange', { mode: modeIndex, text: modeText[modeIndex]});
        
        clearInterval(timeOut);
        timeOut = setTimeout(() => {
            domArr[1].style.display = 'none';
        }, 2000);
    });
}

Player.install('mode', mode)
